<template>
  <div>
    <CommonLogo></CommonLogo>
    <CommonTitle></CommonTitle>

    <div class="box">
      <div class="logo-box">
        <img src="../assets/images/tel.png"/>
      </div>
      <div class="title-box">
        输入手机号
      </div>
      <div class="description-box">
        为享受更多权益和服务，请输入手机号
      </div>
      <div class="tel-box">
        <div class="input-box">
          <input type="text" class="tel" v-model="tel" maxlength="13"/>
          <div class="tel-before-box">
            +86&nbsp;&gt;&nbsp;
          </div>
        </div>
      </div>
      <div v-if="!isLoading" v-bind:class="isMobile?nextGo:nextStay" v-on:click="submit">
        下一步
      </div>
      <Loading v-else></Loading>
      <div class="check-box">
        <input type="checkbox" v-bind:checked="isChecked" id="agree"/>
        <label for="agree">我同意此上网<a>服务条款</a></label>
      </div>
    </div>
    <CommonBanner></CommonBanner>
    <CommonBottom></CommonBottom>
  </div>
</template>

<script>

  export default {
    name: "home",
    mounted: function () {
      var that = this;
      this.$http('/accessToken?client_id=00002&secret=12345678').then(function (response) {
        if (window.localStorage) {
          localStorage.setItem("access_token", response.data.access_token);
        }
      }).catch(function (error) {
        this.Message(that.CommonConst.SERVICE_ERROR)
      });

    },
    data: function () {
      return {
        isChecked: true,
        isMobile: false,
        nextStay: 'next-box-stay',
        nextGo: 'next-box-go',
        tel: '',
        isLoading: false,
        timer: null
      }
    },
    watch: {
      /***
       * 监测用户输入的号码，判断号码是否是3，9位时加入空格，4，9位时减去空格，并改变下一步的状态
       * @param newVal改变后的值
       * @param oldVal改变前的值
       */
      tel: function (newVal, oldVal) {
        if (newVal.trim().length > oldVal.trim().length) {
          if (newVal.length === 3 || newVal.length === 8) {
            this.tel += " ";
          }
        } else {
          if (newVal.trim().length === 4 || newVal.trim().length === 9) {
            this.tel = this.tel.trim();
          }
        }
        if (this.Utils.checkMobile(newVal) && this.isChecked) {
          this.isMobile = true;
        } else {
          this.isMobile = false;
        }
      }
    },
    methods: {
      /***
       * 提交手机号码验证
       * @returns {boolean}
       */
      submit: function () {
        var that = this;
        var tel = this.Utils.trimAll(this.tel);
        if (this.Utils.checkMobile(this.tel) && this.isChecked) {
          this.$http({
            method: 'get',
            url: '/demo/publics/sendSms',
            params: {
              mobile: tel,
              template_id: 'SMS_123797289'
            }
          }).then(function (response) {
            console.log(response)
            if(response.status===200) {
              if(response.data.error===0){
                that.isLoading = true;
                setTimeout(function(){
                  that.$router.push({
                    path: '/code',
                    query: {
                      'tel': tel
                    }
                  });
                },2000)
              } else if(response.data.error==='0003'){
                that.isLoading = true;
                setTimeout(function(){
                  that.$router.push({
                    path: '/code',
                  });
                },2000)
              }
            }
          }).catch(function (error) {
            console.log(error);
          });
        } else {
          this.$message.error('号码格式错误');
        }

      },
    }
  }
</script>

<style scoped>
  .logo-box {
    width: 100%;
    height: 40px;
    text-align: center;
  }

  .logo-box img {
    width: 38px;
    height: 38px;
  }

  .box > div {
    text-align: center;
  }

  .title-box {
    margin-top: 20px;
    text-align: center;
    font-size: 18px;
  }

  .description-box {
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
    color: #9fa0a0;
  }

  .input-box {
    margin: 16px auto 0;
    width: 200px;
    height: 38px;
    position: relative;
    border-bottom: 1px solid #cccccc;
  }

  .tel-before-box {
    position: absolute;
    line-height: 38px;
    top: 0;
    left: -15px;
    font-size: 12px;
  }

  .tel {
    width: 100%;
    height: 100%;
    line-height: 100%;
    border: none;
    outline: none;
    font-size: 18px;
    text-align: center;
  }

  .check-box {
    margin-top: 22px;
    font-size: 12px;
    color: #595757;
  }

  .check-box input {
    vertical-align: middle;
    width: 15px;
    height: 15px;
  }

  .check-box a {
    text-decoration: underline;
    cursor: pointer;
  }

  .check-box label {
    cursor: pointer;
  }
</style>
